<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作 元素以及元素内容的部分
		 .html()    无参功能：获取匹配元素以及元素内容的部分
		            有参功能：将匹配元素集合所有元素
 		 .val()    无参功能 表单内元素：input，select生效
		                   获取表单元素中第一元素的内容
		           有参功能 表单内元素 input，select生效
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text"  value="文本框真实的数据"/>
		<input type="text" placeholder="输入框显示效果[提示]" />
		<!-- html：按钮 | 下拉列表 select>option*3需要加value -->
		<!--  jq 点击按钮 设置下拉列表的值  | html()与val()有参是否存在区别-->
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1"></option>
			<option value="rem2"></option>
			<option value="rem3"></option>
		</select>
		<script>
			$("button").click(function(){
				//抓下拉列表的value值---select
				var rem=$("select").val("rem1")
				//value的值  真实数据 option中值：显示数据
				alert("val()函数有参")
			});
		//动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
		/* $("button").click(function(){
			//注意：js变量不可以为关键字   ins是关键字
			var in=$("input").val();
			alert("val()函数无参"+ins)
		}); */
			
			
			// 有参 点击按钮--下面两个span 改成lorem，lorem
		/* 	$("button").click(function(){
				$("span").html("<span>lorem1</span>");
			}); */
			//js变量【var i=】==jq变量   var 变量名=值，元素
			//无参数  html() 函数使用
		/* 	var html=$("span").html();
			//BOM方式 打印数据
			alert("无参数获取第一个元素内容："+html); */
		</script>
	</body>
</html>